<template>
  <aside
    class="site-sidebar"
    :class="'site-sidebar--' + sidebarLayoutSkin"
    v-if="topMenu != 'tm01'"
  >
    <div class="site-sidebar__inner">
      <el-menu
        :default-active="menuActiveName || 'home'"
        :collapse="sidebarFold"
        :collapseTransition="false"
        class="site-sidebar__menu"
      >
        <sub-menu
          v-for="menu in menuList"
          :key="menu.menuId"
          :menu="menu"
          :default-active="topMenu"
          :dynamicMenuRoutes="dynamicMenuRoutes"
        >
        </sub-menu>
      </el-menu>
    </div>
  </aside>
</template>
<script setup>
import { ref, computed } from 'vue'
import { useCommonStore } from '@/stores/common'
import SubMenu from "./main-sidebar-sub-menu";
import { isURL } from "@/utils/validate";

const commonStore = useCommonStore()
const { sidebarLayoutSkin, sidebarFold } = storeToRefs(commonStore)
const dynamicMenuRoutes = ref([])

const props = defineProps({
  menuList: {
    type: Array,
    default: () => []
  },
  menuActiveName: {
    type: String,
    default: ''
  },
  topMenu: {
    type: String,
    default: ''
  }
})

// 原computed中的menuList改由props传入

const handleMenuSelect = (index) => {
  if (/^dynmic-menu-\d+$/.test(index)) {
    dynamicMenuRoutes.value.forEach(item => {
      if (item.menuId === index && isURL(item.path)) {
        window.open(item.path, '_blank')
      }
    })
  }
}
</script>

<template>
  <!-- 原有模板保持不变 -->
</template>
<style>
.site-sidebar {
  box-shadow: rgba(0, 0, 0, 0.35) 0 1px 5px;
}
.el-submenu__title {
  height: 42px !important;
  line-height: 42px !important;
}
.site-sidebar--dark .site-sidebar__menu.el-menu .el-menu-item.is-active {
  color: #333 !important;
}
.site-sidebar--dark .site-sidebar__menu.el-menu .el-menu-item:focus,
.site-sidebar--dark .site-sidebar__menu.el-menu .el-menu-item:hover,
.site-sidebar--dark
  .site-sidebar__menu.el-menu
  .el-submenu
  > .el-submenu__title:focus,
.site-sidebar--dark
  .site-sidebar__menu.el-menu
  .el-submenu
  > .el-submenu__title:hover,
.site-sidebar--dark > .el-menu--popup .el-menu-item:focus,
.site-sidebar--dark > .el-menu--popup .el-menu-item:hover,
.site-sidebar--dark > .el-menu--popup .el-submenu > .el-submenu__title:focus,
.site-sidebar--dark > .el-menu--popup .el-submenu > .el-submenu__title:hover,
.site-sidebar--dark-popper .site-sidebar__menu.el-menu .el-menu-item:focus,
.site-sidebar--dark-popper .site-sidebar__menu.el-menu .el-menu-item:hover,
.site-sidebar--dark-popper
  .site-sidebar__menu.el-menu
  .el-submenu
  > .el-submenu__title:focus,
.site-sidebar--dark-popper
  .site-sidebar__menu.el-menu
  .el-submenu
  > .el-submenu__title:hover,
.site-sidebar--dark-popper > .el-menu--popup .el-menu-item:focus,
.site-sidebar--dark-popper > .el-menu--popup .el-menu-item:hover,
.site-sidebar--dark-popper
  > .el-menu--popup
  .el-submenu
  > .el-submenu__title:focus,
.site-sidebar--dark-popper
  > .el-menu--popup
  .el-submenu
  > .el-submenu__title:hover {
  color: #108ee9;
}
.site-sidebar--dark .site-sidebar__menu.el-menu .el-menu {
  background: #fff !important;
}
.site-sidebar--dark
  .site-sidebar__menu.el-menu
  .el-submenu.is-opened
  > .el-submenu__title {
  background: #f2f4f8 !important;
  border-right: 3px solid #108ee9;
}
.site-sidebar--dark .site-sidebar__menu.el-menu .el-menu-item.is-active,
.site-sidebar--dark
  .site-sidebar__menu.el-menu
  .el-submenu.is-active
  > .el-submenu__title,
.site-sidebar--dark > .el-menu--popup .el-menu-item.is-active,
.site-sidebar--dark
  > .el-menu--popup
  .el-submenu.is-active
  > .el-submenu__title,
.site-sidebar--dark-popper .site-sidebar__menu.el-menu .el-menu-item.is-active,
.site-sidebar--dark-popper
  .site-sidebar__menu.el-menu
  .el-submenu.is-active
  > .el-submenu__title,
.site-sidebar--dark-popper > .el-menu--popup .el-menu-item.is-active,
.site-sidebar--dark-popper
  > .el-menu--popup
  .el-submenu.is-active
  > .el-submenu__title {
  color: #1a76d2 !important;
}
</style>
